import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:life_service/color/hex.dart';
import 'package:life_service/route/index.dart';
import 'package:life_service/utils/styles.dart';

class HotelSuccessPage extends GetView<HotelSuccessPage> {
  const HotelSuccessPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        systemOverlayStyle: SystemUiOverlayStyle.dark,
        leadingWidth: 120,
        leading: TextButton(
          onPressed: Get.back,
          child: Text.rich(
            TextSpan(
              children: [
                const WidgetSpan(
                  child: Icon(
                    CupertinoIcons.chevron_back,
                    size: 18,
                    color: Colors.black,
                  ),
                ),
                TextSpan(
                  text: ' 支付订单',
                  style: StylesUtils.customTextStyle(
                    fontSize: StylesUtils.fontSize16,
                    color: HexColor.color3333,
                  ),
                ),
              ],
            ),
          ),
        ),
        shape: LinearBorder.bottom(
          side: BorderSide(
            color: HexColor(HexColor.colorF2f2),
          ),
        ),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(horizontal: 25),
        child: Column(
          children: [
            Container(
              alignment: Alignment.center,
              margin: const EdgeInsets.only(top: 30),
              child: Icon(
                CupertinoIcons.checkmark_alt_circle,
                size: 70,
                color: HexColor(HexColor.colorFf62),
              ),
            ),
            Container(
              alignment: Alignment.center,
              margin: const EdgeInsets.only(top: 15),
              child: Text(
                '支付成功',
                style: StylesUtils.customTextStyle(
                  color: HexColor.color3333,
                  fontSize: StylesUtils.fontSize20,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 50),
              child: StaggeredGrid.count(
                crossAxisCount: 2,
                crossAxisSpacing: 20,
                children: [
                  Align(
                    alignment: Alignment.centerLeft,
                    child: TextButton(
                      onPressed: () {
                        // Get.toNamed(Routes.hotelPay);
                      },
                      style: ButtonStyle(
                        fixedSize: const WidgetStatePropertyAll(Size(160, 40)),
                        maximumSize:
                            const WidgetStatePropertyAll(Size(160, 40)),
                        backgroundColor: WidgetStatePropertyAll(
                            HexColor.rgba(255, 98, 98, 0.0980392156862745)),
                        foregroundColor:
                            const WidgetStatePropertyAll(Colors.transparent),
                        alignment: Alignment.center,
                        shape: WidgetStatePropertyAll(
                          RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(4),
                          ),
                        ),
                      ),
                      child: Text(
                        '查看订单',
                        style: StylesUtils.customTextStyle(
                          fontWeight: FontWeight.w700,
                          fontSize: StylesUtils.fontSize16,
                          color: HexColor.colorFf62,
                        ),
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.centerLeft,
                    child: TextButton(
                      onPressed: () {
                        Get.offNamedUntil(
                            Routes.home, (r) => r.settings.name == Routes.home);
                      },
                      style: ButtonStyle(
                        fixedSize: const WidgetStatePropertyAll(Size(160, 40)),
                        maximumSize:
                            const WidgetStatePropertyAll(Size(160, 40)),
                        backgroundColor: WidgetStatePropertyAll(
                            HexColor.rgba(255, 98, 98, 0.0980392156862745)),
                        foregroundColor:
                            const WidgetStatePropertyAll(Colors.transparent),
                        alignment: Alignment.center,
                        shape: WidgetStatePropertyAll(
                          RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(4),
                          ),
                        ),
                      ),
                      child: Text(
                        '返回首页',
                        style: StylesUtils.customTextStyle(
                          fontWeight: FontWeight.w700,
                          fontSize: StylesUtils.fontSize16,
                          color: HexColor.colorFf62,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.symmetric(vertical: 30),
              alignment: Alignment.centerLeft,
              child: Text(
                '附近酒店',
                style: StylesUtils.customTextStyle(
                  fontSize: StylesUtils.fontSize16,
                  color: HexColor.color3333,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ),
            StaggeredGrid.count(
              crossAxisCount: 2,
              crossAxisSpacing: 15,
              mainAxisSpacing: 20,
              children: [
                for (var i = 0; i < 20; i++)
                  Column(
                    children: [
                      Stack(
                        children: [
                          ClipRRect(
                            borderRadius: BorderRadius.circular(5.r),
                            child: Image.network(
                              'https://img2.baidu.com/it/u=1407638119,2449258627&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=235',
                              width: 160,
                              height: 110,
                              fit: BoxFit.fill,
                            ),
                          ),
                          Positioned(
                            top: 8,
                            right: 20,
                            child: Container(
                              constraints: const BoxConstraints.expand(
                                  width: 82, height: 20),
                              decoration: BoxDecoration(
                                color:
                                    HexColor.rgba(0, 0, 0, 0.498039215686275),
                                borderRadius: BorderRadius.circular(10),
                              ),
                              alignment: Alignment.center,
                              child: Text(
                                '南锣鼓巷附近',
                                style: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize10,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                      Container(
                        margin: const EdgeInsets.only(top: 10),
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '锦江之星（背景王府井店）',
                          style: StylesUtils.customTextStyle(
                            fontWeight: FontWeight.w700,
                            color: HexColor.color3333,
                          ),
                        ),
                      ),
                      Container(
                        margin: const EdgeInsets.only(top: 5),
                        alignment: Alignment.centerLeft,
                        child: Wrap(
                          spacing: 10,
                          alignment: WrapAlignment.start,
                          crossAxisAlignment: WrapCrossAlignment.center,
                          children: [
                            Text(
                              '4.6分',
                              style: StylesUtils.customTextStyle(
                                color: HexColor.color28d0,
                                fontWeight: FontWeight.w700,
                              ),
                            ),
                            Text(
                              '5000+消费',
                              style: StylesUtils.customTextStyle(
                                color: HexColor.color3333,
                                fontSize: StylesUtils.fontSize12,
                              ),
                            ),
                          ],
                        ),
                      ),
                      Container(
                        margin: const EdgeInsets.only(top: 5),
                        alignment: Alignment.centerLeft,
                        child: Wrap(
                          spacing: 10,
                          alignment: WrapAlignment.start,
                          crossAxisAlignment: WrapCrossAlignment.center,
                          children: [
                            Text(
                              '360',
                              style: StylesUtils.customTextStyle(
                                color: HexColor.colorFf62,
                                fontWeight: FontWeight.w700,
                                fontSize: StylesUtils.fontSize16,
                              ),
                            ),
                            Text(
                              '起',
                              style: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize12,
                                  color: HexColor.color9999),
                            ),
                            Container(
                              constraints: const BoxConstraints.expand(
                                  width: 55, height: 20),
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                border: Border.all(
                                  color: HexColor(HexColor.colorFfc7),
                                ),
                              ),
                              child: Text(
                                '新人红包',
                                style: StylesUtils.customTextStyle(
                                  color: HexColor.colorFfc7,
                                  fontSize: StylesUtils.fontSize10,
                                ),
                              ),
                            )
                          ],
                        ),
                      )
                    ],
                  ),
              ],
            )
          ],
        ),
      ),
    );
  }
}
